<template>
  <div class="relative">
    <!-- 主题切换按钮 -->
    <HoverCard>
      <HoverCardTrigger as-child>
        <Button variant="ghost">
            <Sun
                class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon
                class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span class="sr-only">切换主题</span>
        </Button>
      </HoverCardTrigger>
      <HoverCardContent align="end" class="w-36 mt-1 space-y-2">
        <div class="flex items-center pl-6 cursor-pointer hover:text-primary" @click="mode = 'light'">
          <Sun class="h-4 w-4 mr-2" /><span>浅色</span>
        </div>
        <div class="border-b border-dashed"></div>
        <div class="flex items-center pl-6 cursor-pointer hover:text-primary" @click="mode = 'dark'">
          <Moon class="h-4 w-4 mr-2" /><span>深色</span>
        </div>
        <div class="border-b border-dashed"></div>
        <div class="flex items-center pl-6 cursor-pointer hover:text-primary" @click="mode = 'auto'">
          <SunMoon class="h-4 w-4 mr-2" /><span>系统</span>
        </div>
      </HoverCardContent>
    </HoverCard>

    <!-- 主题切换动画遮罩 -->
    <div ref="themeTransition" class="theme-transition fixed inset-0 pointer-events-none z-[9999]"></div>
  </div>
</template>

<script setup lang="ts">
import { Sun, SunMoon, Moon } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()

</script>

<style scoped>
</style> 